<template>
  <div class="scheme-table">
    <div class="table-search">
      <div class="search-left">
        <div class="search-item">
          <div class="item_label">部门：</div>
          <el-select
            v-model="searchForm.orgId"
            filterable
            placeholder="请选择机构"
            size="small"
            clearable
            @change="searchData">
            <el-option v-for="item in orgList" :key="item.orgId" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <div class="item_label">状态：</div>
          <el-select
            v-model="searchForm.labelCode"
            filterable
            placeholder="请选择人员状态"
            size="small"
            clearable
            @change="searchData">
            <el-option v-for="item in labelList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <div class="item_label">是否考核：</div>
          <el-select
            v-model="searchForm.status"
            filterable
            placeholder="请选择人员"
            size="small"
            clearable
            @change="searchData">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <el-input
            placeholder="请输入内容"
            v-model="searchForm.keywords"
            size="small"
            clearable
            @keyup.enter.native="searchData">
            <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
          </el-input>
        </div>
      </div>
      <div class="search-right guide-step" id="guide-step-6">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click.stop="updateData"
          v-if="schemeInfo.status === '0'">
          更新数据
        </el-button>
      </div>
    </div>
    <div class="table-box">
      <vxe-table
        stripe
        border
        align="center"
        auto-resize
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        row-id="id"
        height="100%"
        class="table-con">
        <vxe-column type="seq" title="序号" width="80"></vxe-column>
        <vxe-column field="orgName" title="机构名称" min-width="240"></vxe-column>
        <vxe-column field="userName" title="姓名" width="200"></vxe-column>
        <vxe-column field="userInfo.gender" title="性别" width="100"></vxe-column>
        <vxe-column field="userInfo.post" title="职位" min-width="140"></vxe-column>
        <vxe-column field="userInfo.userStatus" title="状态" width="100">
          <template #default="{ row }">
            <div>{{ row.userInfo.userStatus | UserStatus }}</div>
          </template>
        </vxe-column>
        <vxe-table-column title="日期标注" min-width="150">
          <template #default="{ row }">
            <div v-for="item in row.labelList" :key="item.id">
              <template v-if="item.labelValue && item.labelShow === '1'">
                <span class="primary" v-if="['ENTRY', 'TRANSFER_POSITION', 'EXPATRIATE'].includes(item.labelCode)">
                  {{ item.labelName }}
                </span>
                <span class="danger" v-if="['RETIRE', 'DEPART'].includes(item.labelCode)">
                  {{ item.labelName }}
                </span>
                {{ item.labelValue }}
              </template>
            </div>
          </template>
        </vxe-table-column>
        <vxe-column title="是否考核" width="130">
          <template #default="{ row }">
            <div>{{ row.status === '0' ? '是' : row.status === '1' ? '否' : '直接定等次' }}</div>
          </template>
        </vxe-column>
        <vxe-column title="备注" width="200">
          <template #default="{ row }">
            {{ getRemark(row) }}
          </template>
        </vxe-column>
        <vxe-column field="oper" title="操作" min-width="180" fixed="right" v-if="schemeInfo.status === '0'">
          <template #default="{ row }">
            <el-button type="text" style="color: #2b78f1" @click.stop="editScheme(row, 'edit')">编辑</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="table-pagination">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getAllOrgan } from '@apis/assessManage.js'
export default {
  name: 'SchemeTable',
  emits: ['add-scheme', 'search-list', 'edit-scheme', 'copy-scheme', 'del-scheme', 'launch-scheme'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchForm: {
        orgId: '',
        tenantId: '',
        year: '',
        quarter: '',
        busPeriod: '',
        isRefresh: '0',
        keywords: '',
        labelCode: '',
        status: '',
        type: '',
        userId: '',
      },
      productList: [{ productId: 'all', productName: '全部' }],
      statusList: [
        { value: '', label: '全部' },
        { value: '0', label: '是' },
        { value: '1', label: '否' },
        { value: '2', label: '直接定等次' },
      ],
      labelList: [
        { code: '', name: '全部' },
        { code: 'ENTRY', name: '入职' },
        { code: 'RETIRE', name: '退休' },
        { code: 'TRANSFER_POSITION', name: '调岗' },
        { code: 'EXPATRIATE', name: '外派' },
        { code: 'DEPART', name: '离职' },
      ],
      orgList: [],
      remarkList: [
        {
          id: '0',
          text: '新录用公务员在试用期内的',
        },
        {
          id: '1',
          text: '病、事假累计时间超过当期平时考核周期一半的',
        },
        {
          id: '2',
          text: '涉嫌违法违纪被立案调查尚未结案的',
        },
        {
          id: '3',
          text: '法律、法规规定的其他情形',
        },
        {
          id: '4',
          text: '其他',
        },
      ],
    }
  },
  filters: {
    UserStatus(val) {
      switch (val) {
        case 1:
          return '试用期'
        case 2:
          return '在职'
        case 3:
          return '退休'
        case 4:
          return '调离'
        case 5:
          return '外派'
        case 6:
          return '离职'

        default:
          break
      }
    },
  },
  computed: {
    ...mapGetters('indReview', ['schemeInfo']),
  },
  watch: {
    schemeInfo: {
      handler() {
        this.searchForm.year = this.schemeInfo.year
        this.searchForm.quarter = this.schemeInfo.quarter
        this.getAllOrgan()
      },
      deep: true,
    },
  },
  created() {
    if (this.schemeInfo) {
      this.searchForm.year = this.schemeInfo.year
      this.searchForm.quarter = this.schemeInfo.quarter
      this.getAllOrgan()
    }
  },
  methods: {
    updateData() {
      this.$confirm('更新数据后将重新获取考核对象，并清除手动修改考核状态，是否确定更新？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.searchForm.isRefresh = '1'
          this.$emit('search-list', this.searchForm)
        })
        .catch(() => {})
    },
    searchData() {
      this.searchForm.isRefresh = '0'
      this.$emit('search-list', this.searchForm)
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    editScheme(obj) {
      this.$emit('edit-scheme', obj)
    },
    getAllOrgan() {
      getAllOrgan().then(res => {
        const data = [
          {
            orgId: '',
            orgName: '全部',
          },
        ]
        res.data.forEach(item => {
          data.push({
            orgId: item.id,
            orgName: item.orgAlias,
          })
        })
        this.orgList = data
      })
    },
    getRemark(row) {
      if (row.status === '2') {
        const arr = ['好', '较好', '一般', '较差']
        if (row.defaultRank === '6') {
          let str = ''
          if (row.reason.length === 1) {
            str = this.remarkList[Number(row.reason)].text
          } else {
            str = row.reason.slice(1)
          }
          return `不定等次（${str}）`
        } else {
          return arr[row.defaultRank - 1]
        }
      } else {
        if (!row.reason) return
        if (row.reason.length === 1) {
          return this.remarkList[Number(row.reason)].text
        } else {
          return row.reason.slice(1)
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.scheme-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .table-search {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .search-left {
      width: 100%;
      display: flex;
      align-items: center;
      .search-item {
        display: flex;
        align-items: center;
        .item_label {
          // width: 70px;
          // min-width: 70px;
          margin-right: 10px;
        }
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
    }
  }
  .table-box {
    width: 100%;
    flex: 1;
    position: relative;
  }
  .table-pagination {
    margin-top: 10px;
  }
  ::v-deep .headerStyle {
    background-color: #f0f4f9;
    .vxe-cell {
      color: #333333;
      font-size: 14px;
      span {
        font-weight: 600;
      }
    }
  }
  ::v-deep .rowClass {
    .vxe-cell {
      color: #666666;
      font-size: 14px;
      p,
      div,
      span {
        font-size: 14px;
      }
      .scheme-name.go-namage-name {
        cursor: pointer;
        color: #2b78f1;
      }
    }
  }
}
.primary {
  color: #409eff;
}
.danger {
  color: #f56c6c;
}
</style>
